<script setup lang="ts">
import WebsiteConfig from './components/WebsiteConfig.vue'
import NotifySmsConfig from './components/NotifySmsConfig.vue'
import WechatConfig from './components/WechatConfig.vue'

defineOptions({ name: 'SystemConfig' })

const route = useRoute()
const router = useRouter()
const activeKey = ref('1')
watch(
  () => route.query,
  () => {
    if (route.query.tabKey) {
      activeKey.value = String(route.query.tabKey)
    }
  },
  { immediate: true },
)
const onTabChange = (key: string | number) => {
  activeKey.value = key as string
  router.replace({ path: route.path, query: { tabKey: key } })
}
</script>

<template>
  <ProPage title="配置管理" description="提供系统的集中统一配置">
    <a-tabs v-model:active-key="activeKey" position="left" @change="onTabChange">
      <a-tab-pane key="1" title="网站配置">
        <WebsiteConfig />
      </a-tab-pane>
      <a-tab-pane key="2" title="短信配置">
        <NotifySmsConfig />
      </a-tab-pane>
      <a-tab-pane key="3" title="微信配置">
        <WechatConfig />
      </a-tab-pane>
      <a-tab-pane key="4" title="安全配置">
        <div>安全配置</div>
      </a-tab-pane>
    </a-tabs>
  </ProPage>
</template>

<style lang="less" scoped>
:deep(.arco-tabs-content) {
  margin-left: 60px;
}

:deep(.arco-tabs-nav-tab) {
  padding-top: 10px;
  padding-bottom: 10px;
}
:deep(.arco-tabs-tab) {
  background-color: var(--color-fill-2);
}
:deep(.arco-tabs-tab-title) {
  height: 32px;
  line-height: 32px;
}
</style>
